<template>
  <div class="mixin-components-container">
    <el-row>
      <el-form ref="form" :model="form" label-width="130px">
        <el-card class="box-card" style="margin-bottom:20px;">
          <div slot="header" class="clearfix">
            <span>修改GPIO协议</span>
          </div>
          <div>
            <el-form-item label="服务ID" class="is-required">
              <el-input v-model.number="form.id" placeholder="请输入一个整数" />
            </el-form-item>
            <el-form-item label="服务名称" class="is-required">
              <el-input v-model="form.ServiceName" placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="协议名称" class="is-required">
              <el-input v-model="form.ProtocolName" :disabled="true" />
            </el-form-item>
            <el-form-item label="协议编号" class="is-required">
              <el-input v-model="form.ProtocolNum" :disabled="true" />
            </el-form-item>
            <el-form-item label="服务地址" class="is-required">
              <el-input v-model="form.ServiceAddress" placeholder="请输入服务地址" />
            </el-form-item>
            <el-form-item label="引脚编号" class="is-required">
              <el-input v-model="form.ProtocolData.Channel" placeholder="请输入引脚编号" />
            </el-form-item>
            <el-form-item label="IO" class="is-required">
              <el-select v-model.number="form.ProtocolData.IO">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="Initial" class="is-required">
              <el-select v-model.number="form.ProtocolData.Initial">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="Protocol" class="is-required">
              <el-select v-model="form.ProtocolData.Rule[0].Protocol" placeholder="请选择Protocol">
                <el-option label="TCP" value="TCP" />
                <el-option label="UDP" value="UDP" />
              </el-select>
            </el-form-item>
            <el-form-item label="Host" class="is-required">
              <el-input v-model="form.ProtocolData.Rule[0].Host" placeholder="请输入host" />
            </el-form-item>
            <el-form-item label="Port" class="is-required">
              <el-input v-model.number="form.ProtocolData.Rule[0].Port" placeholder="请输入port" />
            </el-form-item>
            <el-form-item label="BufSize" class="is-required">
              <el-input v-model.number="form.ProtocolData.Rule[0].BufSize" placeholder="请输入BufSize" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Save">保存配置</el-button>
              <el-button type="danger" style="margin-left:10px" @click="Remove">删除</el-button>
              <router-link :to="'/protocol/table'">
                <el-button type="info" style="margin-left:10px">取消</el-button>
              </router-link>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      id: this.$route?.query.id,
      form: {
        id: undefined, // int 服务id（用户自定义）
        ServiceName: '', // string 服务名称
        ProtocolNum: '1001', // string 协议编号
        ProtocolName: 'GPIO', // string 协议名称
        ServiceAddress: '', // string 服务地址
        ProtocolData: {
          ProtocolNum: '1001', // string 协议编号
          ProtocolName: 'GPIO', // string 协议名称
          Channel: [], // int型数组 用于存放引脚编号
          IO: undefined, // 0为输入 1为输出 默认为1
          Initial: undefined, // 0为初始值为低电平，1为初始值为高电平
          Rule: [
            {
              Protocol: '', // tcp或者udp
              Host: '', // ip地址
              Port: undefined, // int 端口号
              BufSize: undefined // int 缓冲区大小
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.Set()
  },
  methods: {
    Set() {
      axios({
        method: 'get',
        url: `http://192.168.10.152:5002/protocol/set_parameter/${this.id}`
      }).then((res) => {
        this.form = res.data.data
        console.log(res)
      })
    },
    Save() {
      axios({
        method: 'post',
        url: `http://192.168.10.152:5002/protocol/save_parameter/${this.id}`,
        data: this.form
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success('保存成功')
          setTimeout(() => {
            this.$router.push({
              path: '/protocol/table'
            })
          }, 1000)
        }
        console.log(res)
      })
    },
    Remove() {
      axios({
        method: 'get',
        url: `http://192.168.10.152:5002/protocol/delete_protocol/${this.id}`
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success('删除成功!')
            setTimeout(() => {
              this.$router.push({
                path: '/protocol/table'
              })
            }, 1000)
          }
        })
    }
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item{
  min-height: 100px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
